<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>layui后台管理模板</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="/asset/layui/2.3.0/css/layui.css" media="all"/>
    <script type="text/javascript" src="/asset/js/lp.js"></script>
    <script type="text/javascript" src="/asset/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/asset/vue/2.5.3-1/vue.js"></script>
</head>
<body class="childrenBody">
<div id="allUsers">
    <blockquote class="layui-elem-quote news_search">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" value="" placeholder="请输入关键字" v-model="text" class="layui-input search_input">
            </div>
            <a class="layui-btn search_btn" v-on:click="loadUsers" >查询</a>
        </div>
        <!--<a class="layui-btn layui-btn-normal usersAdd_btn">添加用户</a>-->
        <!--</div>-->
    </blockquote>
    <div class="layui-form news_list">
        <table class="layui-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>用户名称</th>
                <th>appKey</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody class="users_content">

            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.appKey}}</td>
                <td>
                    <a class="layui-btn layui-btn-mini" v-on:click="edituser(user)"><i class="iconfont icon-edit"></i> 编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-mini" v-on:click="deleteuser(user)"><i class="layui-icon">&#xe640;</i> 删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div id="page"></div>
<script>
    var App = new Vue({
        el: '#allUsers',
        data: {
            userList: '',
            text:""
        },
        methods:{
            loadUsers:function () {
                var url="/user/users";
                var _self = this;
                $.get(url,function(data){
                    // _self.userList=eval("(" + data +")");
                    _self.userList=data;
                })
            },
            edituser:function (user) {
                window.location="/user/edit/"+user.id;
            },
            deleteuser:function (user) {
                layer.confirm('确定删除用户：'+user.name+'？',{icon:3, title:'提示信息'},function(index){
                    $.post({
                        url: "/user/delete/"+user.id,
                        success: function (obj) {
                            layer.msg(obj.msg);
                            App.loadUsers();
                        },
                        error: function(data) {
                            layer.msg("网络错误");
                        }
                    });
                    layer.close(index);
                    return false;
                });
            }
        }
    });
    //初始化加载数据
    App.loadUsers();
</script>
</body>
</html>